<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>智能助手</title>
    <link rel="stylesheet" href="sidepanel.css">
</head>
<body>
    <!-- 顶部区域 -->
    <div class="header">
        <div class="header-content">
            <span class="header-icon">🌐</span>
            <span class="header-title">智能助手</span>
        </div>
    </div>

    <!-- 主要内容区域 -->
    <div class="main-content">
        <!-- 配置区域 -->
        <div id="config-section" class="section">
                
                <div class="config-form">
                <h3>智能助手配置</h3>
                
                <div class="config-options">
                    <div class="option-group">
                        <label for="model-select">默认AI模型:</label>
                        <select id="model-select">
                            <optgroup label="请先测试API连接">
                                <option value="" disabled selected>请先测试API连接</option>
                            </optgroup>
                        </select>
                    </div>
                    
                    <div class="option-group">
                        <label for="max-tokens">最大Token数:</label>
                        <input type="number" id="max-tokens" min="1000" max="8000" value="4000">
                    </div>
                </div>
                
                <!-- 多服务商API配置 -->
                <div class="api-providers-config">
                    <h4>API服务商配置</h4>
                    
                    <!-- Moonshot配置 -->
                    <div class="provider-config">
                        <h5>
                            <span class="provider-icon">🚀</span>
                            Moonshot (Kimi)
                            <span class="provider-status" id="moonshot-status">未配置</span>
                        </h5>
                        <div class="provider-inputs">
                            <div class="input-group">
                                <label for="moonshot-api-key">API密钥:</label>
                                <div class="input-with-button">
                                    <input type="password" id="moonshot-api-key" placeholder="sk-...">
                                    <button type="button" class="btn btn-secondary btn-small toggle-password-btn" data-target="moonshot-api-key">👁️</button>
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="moonshot-base-url">API地址:</label>
                                <input type="text" id="moonshot-base-url" value="https://api.moonshot.cn/v1" readonly>
                            </div>
                            <div class="provider-actions">
                                <button type="button" class="btn btn-test" id="test-moonshot-btn">测试连接</button>
                                <span class="test-status" id="moonshot-test-status"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- OpenAI配置 -->
                    <div class="provider-config">
                        <h5>
                            <span class="provider-icon">🤖</span>
                            OpenAI
                            <span class="provider-status" id="openai-status">未配置</span>
                        </h5>
                        <div class="provider-inputs">
                            <div class="input-group">
                                <label for="openai-api-key">API密钥:</label>
                                <div class="input-with-button">
                                    <input type="password" id="openai-api-key" placeholder="sk-...">
                                    <button type="button" class="btn btn-secondary btn-small toggle-password-btn" data-target="openai-api-key">👁️</button>
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="openai-base-url">API地址:</label>
                                <input type="text" id="openai-base-url" value="https://api.openai.com/v1">
                            </div>
                            <div class="provider-actions">
                                <button type="button" class="btn btn-test" id="test-openai-btn">测试连接</button>
                                <span class="test-status" id="openai-test-status"></span>
                            </div>
                        </div>
                    </div>
                    
                    <!-- Anthropic配置 -->
                    <div class="provider-config">
                        <h5>
                            <span class="provider-icon">🧠</span>
                            Anthropic (Claude)
                            <span class="provider-status" id="anthropic-status">未配置</span>
                        </h5>
                        <div class="provider-inputs">
                            <div class="input-group">
                                <label for="anthropic-api-key">API密钥:</label>
                                <div class="input-with-button">
                                    <input type="password" id="anthropic-api-key" placeholder="sk-ant-...">
                                    <button type="button" class="btn btn-secondary btn-small toggle-password-btn" data-target="anthropic-api-key">👁️</button>
                                </div>
                            </div>
                            <div class="input-group">
                                <label for="anthropic-base-url">API地址:</label>
                                <input type="text" id="anthropic-base-url" value="https://api.anthropic.com">
                            </div>
                            <div class="provider-actions">
                                <button type="button" class="btn btn-test" id="test-anthropic-btn">测试连接</button>
                                <span class="test-status" id="anthropic-test-status"></span>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="config-options">
                    <div class="option-group">
                        <label>
                            <input type="checkbox" id="auto-translate" checked>
                            自动翻译选中文本
                        </label>
                    </div>
                    
                    <div class="option-group">
                        <label>
                            <input type="checkbox" id="auto-summarize" checked>
                            自动总结页面内容
                        </label>
                    </div>
                </div>
                
                <div class="config-actions">
                    <button id="save-config" class="btn btn-primary">保存配置</button>
                    <button id="reset-config" class="btn btn-danger">重置配置</button>
                </div>
                
                <div class="config-status" id="config-status">
                    <div class="status-item">
                        <span class="status-label">配置状态:</span>
                        <span class="status-value" id="config-status-value">未配置</span>
                    </div>
                    <div class="status-item">
                        <span class="status-label">API密钥:</span>
                        <span class="status-value" id="api-key-status">未设置</span>
                    </div>
                </div>
            </div>
        </div>

        <!-- 主功能界面 -->
        <div id="main-section" class="section" style="display: none;">
            <!-- 标签页导航 -->
            <div class="tab-navigation">
                <button id="translate-tab" class="tab-btn active">翻译模式</button>
                <button id="summarize-tab" class="tab-btn">总结模式</button>
                <button id="settings-tab" class="tab-btn-settings">⚙️</button>
            </div>

            <!-- 翻译功能界面 -->
            <div id="translate-content" class="tab-content active">
                <!-- 翻译模型选择 -->
                <div class="translate-model-section">
                    <div class="model-selection">
                        <label for="translate-model-select">翻译模型:</label>
                        <select id="translate-model-select">
                            <optgroup label="请先测试API连接">
                                <option value="" disabled selected>请先在设置中测试API连接</option>
                            </optgroup>
                        </select>
                        <div class="model-status-indicator">
                            <span id="model-status-text" class="model-status-paid">请先测试API连接</span>
                        </div>
                    </div>
                </div>
                
                <div class="content-area">
                    <div class="text-group">
                        <label>原文：</label>
                        <div id="original-text" class="text-display editable" contenteditable="true" placeholder="请选中页面文本或直接在此输入要翻译的内容..."></div>
                    </div>
                    
                    <!-- 语言检测和翻译方向显示 -->
                    <div class="translation-direction" id="translation-direction" style="display: none;">
                        <span class="direction-arrow">🔄</span>
                        <span id="language-direction-text">自动检测语言并翻译</span>
                    </div>
                    
                    <div class="text-group">
                        <label>译文：</label>
                        <div id="translated-text" class="text-display" placeholder="翻译结果将显示在这里..."></div>
                    </div>
                    
                    <div class="action-buttons">
                        <button id="translate-btn" class="btn btn-primary">
                            <span class="btn-icon">🌐</span>
                            翻译
                        </button>
                        <button id="clear-btn" class="btn btn-clear">
                            <span class="btn-icon">🗑️</span>
                            清空
                        </button>
                        <button id="copy-translation-btn" class="btn btn-copy">
                            <span class="btn-icon">📋</span>
                            复制译文
                        </button>
                    </div>
                    
                    <div class="translate-info">
                        <span id="current-translate-model" class="current-model-display">当前模型: 请先测试API连接</span>
                    </div>
                </div>
            </div>

            <!-- 总结功能界面 -->
            <div id="summarize-content" class="tab-content">
                <div id="summarize-prompt" class="prompt-message">
                    <p>点击按钮开始分析当前页面内容</p>
                    <button id="summarize-page-btn" class="btn btn-primary">
                        <span class="btn-icon">📊</span>
                        分析页面内容
                    </button>
                </div>
                
                <div id="summarize-loading" class="loading-message" style="display: none;">
                    <div class="loading-spinner"></div>
                    正在分析页面内容...
                </div>
                
                <div id="summarize-result" class="content-area" style="display: none;">
                    <div class="text-group">
                        <label>页面标题：</label>
                        <div id="page-title" class="text-display"></div>
                    </div>
                    
                    <div class="text-group">
                        <label>内容总结：</label>
                        <div id="summary-text" class="text-display summary-scroll"></div>
                    </div>
                    
                    <div class="action-buttons">
                        <button id="new-summarize-btn" class="btn btn-primary">
                            <span class="btn-icon">📊</span>
                            重新分析
                        </button>
                        <button id="resummarize-btn" class="btn btn-clear">
                            <span class="btn-icon">🔄</span>
                            刷新总结
                        </button>
                        <button id="copy-summary-btn" class="btn btn-copy">
                            <span class="btn-icon">📋</span>
                            复制总结
                        </button>
                    </div>
                </div>
            </div>
        </div>

        <!-- 设置界面 -->
        <div id="settings-section" class="section" style="display: none;">
            <div class="section-header">
                <span class="section-icon">⚙️</span>
                <span class="section-title">设置</span>
            </div>
            
            <div class="settings-content">
                <div class="settings-group">
                    <h4>API设置</h4>
                    <div class="setting-item">
                        <label>当前模型:</label>
                        <span id="current-model">kimi-latest</span>
                    </div>
                    <div class="setting-item">
                        <label>最大Token数:</label>
                        <span id="current-max-tokens">4000</span>
                    </div>
                    <div class="setting-item">
                        <label>API密钥状态:</label>
                        <span id="current-api-status">已配置</span>
                    </div>
                </div>
                
                <div class="settings-group">
                    <h4>功能设置</h4>
                    <div class="setting-item">
                        <label>自动翻译:</label>
                        <span id="current-auto-translate">开启</span>
                    </div>
                    <div class="setting-item">
                        <label>自动总结:</label>
                        <span id="current-auto-summarize">开启</span>
                    </div>
                </div>
                
                <div class="settings-actions">
                    <button id="edit-settings" class="btn btn-primary">编辑设置</button>
                    <button id="export-config" class="btn btn-secondary">导出配置</button>
                    <button id="import-config" class="btn btn-secondary">导入配置</button>
                </div>
            </div>
            
            <div class="back-button">
                <button id="back-from-settings" class="btn btn-back">← 返回</button>
            </div>
        </div>

        <!-- 错误提示 -->
        <div id="error-message" class="error-message" style="display: none;"></div>
    </div>

    <script src="config.js"></script>
    <script src="sidepanel.js"></script>
</body>
</html> 